<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                padding: 0;
                margin: 0;
                list-style: none;
            }

            html,
            body {
                padding: 0;
                margin: 0;
            }

            body {
                display: flex;
            }

            body::-webkit-scrollbar {
                display: none;
            }

            .outer {
                width: 850px;
                margin: auto;
                background-color: rgba(255, 170, 10, .8);
                border: 2px dashed rgba(100, 100, 100, .8);
                border-radius: 10px;
                display: flex;
                justify-content: space-around;
                align-items: center;
                position: relative;
            }

            .inner {
                width: 400px;
                height: 400px;
                margin-left: 80px;
            }

            .inner .pho {
                width: 400px;
                display: flex;
                flex-wrap: wrap;
            }

            .inner .pho .pic {
                width: 100px;
                height: 100px;
                background-color: #bfa;
            }

            .inner .pho .pic img {
                width: 100px;
                height: 100px;
                border: white 2px solid;
                /* padding: 2px; */
                box-sizing: border-box;

            }

            .outer .left {
                width: 150px;
                height: 500px;
            }

            .right {
                width: 100px;
                height: 500px;
                /* border: 1px solid red; */
            }

            .left img {
                width: 90%;
                height: 90%;
                opacity: .8;
                border-radius: 5px;
                margin: 100px 15px;
                margin-left: 40px;
            }

            .left .time {
                margin-left: 40px;
                padding: 5px;
                width: 120px;
                text-align: center;
                border-radius: 3px;
                background-color: #fff;
            }

            .right>div {
                width: 100px;
                height: 40px;
                text-align: center;
                line-height: 40px;
                border-radius: 10px;
                background-color: #eee;
                margin: 30px auto 20px -10px;
                cursor: pointer;
            }

            .right .start {
                margin-top: 150px;
            }

            .right .start a {
                text-decoration: none;
                color: black;
            }

            .outer .begin,
            .restart {

                width: 140px;
                height: 140px;
                font-size: 35px;
                line-height: 65px;
                color: white;
                text-align: center;
                background-color: skyblue;
                border-radius: 50%;
                position: absolute;
                left: 50%;
                top: 50%;
                cursor: pointer;
                transform: translateX(-50%);
                transform: translateY(-50%);
                animation: dou 1s linear infinite;
            }

            @keyframes dou {
                0% {
                    top: 50%
                }

                25% {
                    top: 51%;
                }

                75% {
                    top: 49%;
                }

                100% {
                    top: 50%;
                }
            }

            .right div.restart {
                width: 200px;
                height: 80px;
                line-height: 80px;
                background-color: skyblue;
                display: none;
            }

            .over {
                width: 300px;
                height: 120px;
                text-align: center;
                line-height: 55px;
                background-color: skyblue;
                border-radius: 8px;
                z-index: 10;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateX(-45%) translateY(-55%);
                display: none;
            }
        </style>
    </head>

    <body>
        <div class="outer">
            <audio src="http://www.xiaoluya.top/Fr1rRNrZCYZs3-EJbdMnfcHSD57c"></audio>
            <div class="over">
            </div>
            <div class="begin">开&nbsp;始<br>游&nbsp;戏</div>
            <div class="left">
                <div class="allPic">
                    <img src="http://www.xiaoluya.top/FpHSZ8QKt9giChjKFYEigpeQ2EEW" alt="">
                </div>
                <div class="time">
                    <p class="timeCon">
                        计时：
                        <span class="minute">0</span>分
                        <span class="second">0</span>秒
                    </p>

                </div>
            </div>
            <div class="inner">
                <ul class="pho">
                    <li class="pic"><img src="./imgs/pt10.png" alt="10"></li>
                    <li class="pic"><img src="./imgs/pt13.png" alt="13"></li>
                    <li class="pic"><img src="./imgs/pt4.png" alt="4"></li>
                    <li class="pic"><img src="./imgs/pt7.png" alt="7"></li>
                    <li class="pic"><img src="./imgs/pt8.png" alt="8"></li>
                    <li class="pic"><img src="./imgs/pt14.png" alt="14"></li>
                    <li class="pic"><img src="./imgs/pt9.png" alt="9"></li>
                    <li class="pic"><img src="./imgs/pt5.png" alt="5"></li>
                    <li class="pic"><img src="./imgs/pt15.png" alt="15"></li>
                    <li class="pic"><img src="./imgs/pt3.png" alt="3"></li>
                    <li class="pic"><img src="./imgs/pt1.png" alt="1"></li>
                    <li class="pic"><img src="./imgs/pt2.png" alt="2"></li>
                    <li class="pic"><img src="./imgs/pt6.png" alt="6"></li>
                    <li class="pic"><img src="./imgs/pt12.png" alt="12"></li>
                    <li class="pic"><img src="./imgs/pt11.png" alt="11"></li>
                    <li class="pic "><img src="./imgs/pt-16.gif" alt="16" id="flag"></li>
                </ul>
            </div>
            <div class="right">
                <div class="start">
                    <a id="beg" href="javascript:location.reload();">重新开始</a>
                </div>
                <div class="stop">暂停游戏</div>
                <div class="restart">继续游戏</div>
            </div>

        </div>
        <script>

            function InversePairs(data = []) {
                // write code here
                let len = data.length
                if (len === 0) return 0
                const copy = data.concat([])
                let count = InversePairsHelp(data, copy, 0, len - 1)
                return count
                function InversePairsHelp(data, copy, start, end) {
                    if (start === end) {
                        copy[start] = data[start]
                        return 0
                    }
                    let mid = Math.floor((end - start) / 2)
                    let left = InversePairsHelp(copy, data, start, start + mid)
                    let right = InversePairsHelp(copy, data, start + mid + 1, end)
                    let i = start + mid
                    let j = end
                    let count = 0
                    let indexCopy = end
                    while (i >= start && j >= start + mid + 1) {
                        if (data[i] > data[j]) {
                            copy[indexCopy--] = data[i--]
                            count = count + j - start - mid
                        } else {
                            copy[indexCopy--] = data[j--]
                        }
                    }
                    for (; i >= start; i--)
                        copy[indexCopy--] = data[i]
                    for (; j >= start + mid + 1; j--)
                        copy[indexCopy--] = data[j]
                    return left + right + count
                }
            }
            function randomNum(arr) {
                while (arr.length <= 14) {
                    let num = Math.floor(Math.random() * 15 + 1)
                    if (!arr.includes(num)) {
                        arr.push(num)
                    }
                }
                return arr
            }
            // 引入音频
            var zbgm = document.querySelector('.outer audio');
            var bgmusic = document.createElement('audio');
            bgmusic.src = './imgs/婚礼用音效-冒泡2_爱给网_aigei_com.mp3';
            var arr = []
            randomNum(arr)
            let isHasValue = InversePairs(arr)
            while (isHasValue % 2 !== 0) {
                arr = randomNum(arr)
            }
            var b = document.querySelectorAll('.pho .pic img')
            arr.forEach(function (item, index) {
                b[index].src = "./imgs/pt" + item + ".png";
                b[index].alt = item
            });

            // 试验版排序
            var paixu = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16].toString();
            // var paixu = arr.toString();

            // 获取节点
            var zul = document.querySelector('.pho');
            var zlis = document.querySelectorAll('.pic');
            var zimgs = document.querySelectorAll('.pho img');

            // 封装事件委托点击事件函数 
            function picmove(e) {
                // 点击播放音频
                bgmusic.play();
                // 获取交换的图片位置信息
                var zflag = document.getElementById('flag');
                var emp = {
                    x: zflag.offsetLeft,
                    y: zflag.offsetTop
                }
                var change = {
                    x: e.target.offsetLeft,
                    y: e.target.offsetTop
                }
                var zrow = Math.abs(emp.x - change.x);
                var zcol = Math.abs(emp.y - change.y);

                // 判断临界距离
                var result = zrow === zcol ? false : zrow < 150 && zcol < 150;

                if (result) {
                    var addr = null;
                    if (e.target.nodeName === 'IMG') {

                        addr = e.target.src;
                        oalt = e.target.alt;
                        zimgs.forEach(function (item, index) {
                            var rong = null;
                            var zhong = null;
                            if (item.id === 'flag') {
                                rong = item.src;
                                zhong = item.alt;
                                item.src = addr;
                                item.alt = oalt;
                                e.target.src = rong;
                                e.target.alt = zhong;
                                item.id = '';
                            }
                        })
                        // e.target.src = '';
                        e.target.id = 'flag';
                    }

                }

                // 验证游戏结束条件
                var arr = [];
                zimgs.forEach(function (item, index) {
                    arr.push(item.alt);
                });
                var zalt = arr.toString();
                console.log(111, zalt, paixu);
                // 游戏结束时，bug修复
                if (zalt === paixu) {
                    clearInterval(countTimer);
                    zstop.onclick = null;
                    zul.onclick = null;
                    zbgm.pause();
                    var zover = document.querySelector('.over');
                    zover.style.display = 'block';
                    zover.innerHTML = `  矮油 , 不错哦 ！<br/>用时：${j}分${i}秒`;
                    // zover.style.color = '#fff';
                    zover.style.fontSize = 20 + 'px';

                }
            }

            // 功能键设置
            var zbegin = document.querySelector('.begin');
            var zsecond = document.querySelector('.second');
            var zminute = document.querySelector('.minute');
            var zstart = document.querySelector('.start');
            var zstop = document.querySelector('.stop');
            var zrestart = document.querySelector('.restart');

            var countTimer = null;
            var flag = true,
                mark = false;
            var i = 0,
                j = 0;

            // 封装时钟函数
            function movetimer() {
                countTimer = setInterval(function () {
                    i++;
                    zsecond.innerHTML = i;

                    if (i >= 59) {
                        i = 0;
                        j++;
                    }
                    zminute.innerHTML = j;
                }, 1000)
            }

            // 开始点击按钮设置
            zbegin.onclick = function (e) {
                zbgm.play();
                zbegin.style.display = 'none';
                movetimer();
                zul.onclick = picmove;
            }

            // 暂停按钮设置
            zstop.onclick = function (e) {
                if (flag) {
                    clearInterval(countTimer);
                    zbgm.pause();
                    zrestart.style.display = 'block';
                    zul.onclick = null;
                    flag = !flag;
                }

                // 继续游戏设置
                zrestart.onclick = function () {
                    movetimer();
                    zbgm.play();
                    zrestart.style.display = 'none';
                    zul.onclick = picmove;
                    flag = !flag;
                }
            }
        </script>
    </body>

</html>